import 'dart:math';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:im_app/im/page/view/component/UserIconView.dart';

import '../../pojo/ImPojo.dart';
import '../bloc/WebRtcCubit.dart';
import '../view/component/LButton.dart';

class WebRtcAudioPage extends StatefulWidget {
  const WebRtcAudioPage({super.key});

  @override
  State<StatefulWidget> createState() => _WebRtcAudioState();
}

class _WebRtcAudioState extends State<WebRtcAudioPage> {

  @override
  void initState() {
    super.initState();
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);
  }

  @override
  Widget build(BuildContext context) {
    var webRtcCubit = context.watch<WebRtcCubit>();
    return Scaffold(
        backgroundColor: Colors.black,
        body: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            _buildTitlePane(context, webRtcCubit),
            _buildContentPane(context, webRtcCubit),
            _buildControlPane(context, webRtcCubit),
            const SizedBox(height: 60,),
          ],
        )
        //   OrientationBuilder(
        //   builder: (context, orientation) => _buildOrientationPane(context, orientation),
        // ),
        );
  }

  Widget _buildContentPane(BuildContext context, WebRtcCubit webRtcCubit) {
    var state = webRtcCubit.state;
    var mediaList = webRtcCubit.state.mediaList;
    var tip = '正在连接中...';
    if (state.timeFormat != '') tip = '';
    if (mediaList.length == 1) {
      // p2p2聊天
      return Expanded(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Expanded(child: Text('')),
          _buildUserInfoPane(context, mediaList[0].user),
          const Expanded(child: Text('')),
          Text(tip, style: const TextStyle(color: Colors.white60),),
          const SizedBox(height: 20,)
        ],
      ));
    } else {
      return Column(
        children: [
          Expanded(child: GridView.builder(
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4, childAspectRatio: 0.9),
            itemCount: mediaList.length,
            itemBuilder: (BuildContext context, int index) {
              return _buildUserInfoPane(context, mediaList[index].user);
            },
          )),

          Text(tip, style: const TextStyle(color: Colors.white60),),
          const SizedBox(height: 20,)
        ],
      );
    }
  }

  Widget _buildTitlePane(BuildContext context, WebRtcCubit webRtcCubit) {
    String timeFormat = webRtcCubit.state.timeFormat;
    return Padding(padding: const EdgeInsets.only(top: 30), child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(timeFormat, style: const TextStyle(color: Colors.white),),
      ],
    ),);
  }

  Widget _buildControlPane(BuildContext context, WebRtcCubit webRtcCubit) {
    var state = webRtcCubit.state;
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        LButton(
          name: state.isCloseAudio ? '麦克风已关' : '麦克风已开',
          assetImage: state.isCloseAudio ? 'assets/webrtc-img/audio_close.svg' : 'assets/webrtc-img/audio.svg',
          radius: 50,
          textColor: Colors.white,
          itemFocusColor: Colors.white24,
          selectCallback: () {
            webRtcCubit.add(WebRtcSwitchAudioEvent());
          },
        ),

        LButton(
          name: '结束',
          assetImage: 'assets/svg/close.svg',
          radius: 50,
          textColor: Colors.white,
          itemBackgroundColor: Colors.red,
          itemFocusColor: Colors.redAccent,
          selectCallback: () {
            webRtcCubit.add(WebRtcCloseEvent(context));
          },
        ),

        LButton(
          name: state.isCloseVideo ? '扬声器已关' : '扬声器已开',
          assetImage: state.isCloseVideo ? 'assets/webrtc-img/speaker_close.svg' : 'assets/webrtc-img/speaker.svg',
          radius: 50,
          textColor: Colors.white,
          itemFocusColor: Colors.white24,
          selectCallback: () {
            webRtcCubit.add(WebRtcSwitchVoiceOutputEvent());
          },
        ),
      ],
    );
  }

  Widget _buildUserInfoPane(BuildContext context, ImUser user) {
    return Column(
      children: [
        UserIconView(user: user),
        Text(user.userName??user.userId, style: const TextStyle(color: Colors.white, fontSize: 16),),
      ],
    );
  }
}
